<template>
  <div class="saveUpdate">
    <el-dialog title="转接" :visible.sync="showDialog" @close="$emit('update:showUpdate', false)"
               :showTransfer="showTransfer" width="800px">
      <el-form :model="DetailInfo" ref="saveChn" label-width="120px" size="mini">
        <dialog-wrapper :MaxWidth="800">
          <el-row>
            <el-col :span="6">客服</el-col>
            <el-col :span="6">待处理单量</el-col>
            <el-col :span="6">满意度</el-col>
            <el-col :span="6">操作</el-col>
          </el-row>
          <el-row v-for="item in DetailInfo.items" :key="item.id">
            <el-col :span="6">{{item.name}}</el-col>
            <el-col :span="6">{{item.wait_count}}</el-col>
            <el-col :span="6">{{item.good_percent === 0 ? '暂无评价':parseFloat(item.good_percent) * 100 + '%'  }}</el-col>
            <el-col :span="6"><el-button type="danger" size="mini" @click="reassignWordOrder(id,item.id)">转接</el-button></el-col>
          </el-row>
        </dialog-wrapper>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:showUpdate', false)" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import DialogWrapper from '@/components/DialogWrapper'
  import {getOnlineUser,reassignWordOrder} from '@/api'

  export default {
    components: {DialogWrapper},
    data() {
      return {
        showDialog: this.showTransfer,
        loading: false,
        DetailInfo: {},
        imageUrl: ''
      }
    },
    props: {
      showTransfer: {
        type: Boolean,
        default: false
      },
      id: {
        type: Number
      },
      typeId:{
        type:Number
      },
      handlerId:{
        type:Number
      }
    },
    created() {
      this.getOnlineUserList()
      console.log(this.showTransfer)
    },
    methods: {
      handleSizeChange(val) {
        this.q.page_size = val
        this.getList()
      },
      saveDetail() {
        addCommonProblem(this.DetailInfo).then(res => {
          if (res.status === 0) {
            this.$message({type: 'success', message: '添加成功'})
            this.$emit('update:showUpdate', false)
          }
        })
      },
      updateDetail() {
        updateCommonProblemById(this.id, this.DetailInfo).then(res => {
          if (res.status === 0) {
            this.$message({type: 'success', message: '编辑成功'})
            this.$emit('update:showUpdate', false)
          }
        })
      },
      getDetail() {
        getCommonProblemById(this.id).then(res => {
          if (res.status === 0) {
            this.DetailInfo = res.data
          }
        })
      },
      getOnlineUserList() {
        getOnlineUser({type_id:this.typeId,handler_id:this.handlerId}).then(res => {
          if (res.status === 0) {
            this.DetailInfo = res.data
          }
        })
      },
      reassignWordOrder(id,val){
        reassignWordOrder(id,{to_user_id:val}).then(res=>{
          if(res.status === 0){
            this.$message({type: 'success', message: '转接成功'})
            this.$emit('update:showUpdate', false)
          }
        })
      }
    }
    ,
    watch: {
      showUpdate() {
        this.showDialog = this.showUpdate
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-row{
    margin-top: 5px !important;
  }
</style>
